<template lang="pug">
  el-dialog(title='领取红包', :visible.sync='showModal', width='30%', :before-close='beforeCloseHandler', :close-on-click-modal='false')
    .content
      p.red 提示：现金红包微信可直接提现
      .mt20
      el-input(
        type="text",
        placeholder="请输入手机号",
        v-model="phone")
    span.dialog-footer(slot="footer")
      el-button(size="small", @click="closeModal") 取 消
      el-button(size="small", type="primary", @click="handleSave") 确 定
</template>
<script>
import modalMixin from '@/mixins/modal'
import { mapGetters } from 'vuex'
export default {
  name: 'welfarePhoneModal',
  mixins: [modalMixin],
  data() {
    return {
      data: null,
      phone: null
    }
  },
  mounted() {
    this.$vgo.on('welfare:phone', (data) => {
      this.openModal()
      this.data = data
    })
  },
  methods: {
    openModal() {
      this.showModal = true
    },
    handleSave() {
      if (!this.phone) {
        this.$vgo.tip('请输入手机号码', 'warning')
        return
      }
      let mbRE = /^1[3|4|5|7|8][0-9]{1}\d{8}$/
      if (!mbRE.test(this.phone)) {
        this.$vgo.tip('手机号码输入不正确', 'warning')
        return
      }
      this.$store.dispatch('grabWelfare', { id: this.data, phone: this.phone })
    }
  }
}
</script>
